<template>
  <div id="app" >
    <router-view @setactive="setactive" />
    <!-- Tabbar -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/"  icon="wap-home-o" color="#2c59b7"
        >首页</van-tabbar-item
      >
      <van-tabbar-item to="/book"  icon="bookmark-o" color="#2c59b7"
        >图书</van-tabbar-item
      >
      <van-tabbar-item to="/cart"  icon="cart-o" color="#2c59b7"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item to="/user"  icon="contact" color="#2c59b7"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // tabbar 的 home 数据
      active: 0,
    };
  },
  methods:{
    setactive(v){
      this.active = v
    }
  },

 
  mounted() {
    // 时间总线(book)
    this.$bus.$on("book", (id) => {
      this.$router.push({
        name: "bookItem",
        params: {
          id,
        },
      });
    });
  },
  beforeDestroy() {
    this.$bus.$off("book");
  },
};
</script>

<style lang="scss">
#app{
  width: 100vw;
  overflow: hidden;
}
</style>
